import "./index.less"
import ControlPanel from  './ControlPanel/index.tsx'
import HeatMapUpGraph from './HeatMapUpGraph'
import HeatMapDownGraph from './HeatMapDownGraph'
import LineGraph from "./LineGraph"
import MapBox from "./MapBox";
import useAppState from "../store";
import {getAllData} from "../api/request.ts";
import {useEffect} from "react";
import {Spin} from "antd";


const AppIndex=()=>{
    const {spinning,setSpinning,setMapData,setTopicHeat,setAllTopicWord,setCurrentTopicWord,setTopicWord}=useAppState();
    // 定义异步函数
    const fetchData = async () => {
        try {
            setSpinning(true);
            // 发送请求并等待响应
            const {data,topicHeat,allTopicWordEvolution} = await getAllData();
            // 更新状态
            setMapData(data);
            setTopicHeat(topicHeat);
            setAllTopicWord(allTopicWordEvolution)
            const defaultTheme=Object.keys(data)[0];
            const {topicWordEvolution} = await getAllData(false,{topic:defaultTheme});
            setTopicWord(topicWordEvolution);
            setCurrentTopicWord(defaultTheme);
            setSpinning(false);
            console.log("所有数据",data,topicHeat,allTopicWordEvolution);
        } catch (error) {
            console.error("请求失败:", error);
        }
    };
    useEffect( () => {
        // 执行异步函数
        fetchData();
    }, []);
    return (
        <>
            <div className={"TrajectoryVis"}>
                <div className={"TopBox"}>The Visualization of Dynamic Topic analysis for Trajectory Data</div>
                <div className={"BottomBox"}>
                    <div className={"ControlPanelBox"}><ControlPanel></ControlPanel></div>
                    <div className={"DataOverviewBox"}>
                        <div className={"DataOverviewLeftBox"}><MapBox></MapBox>
                            <LineGraph></LineGraph>
                        </div>
                        <div className={"DataOverviewRightBox"}>
                            <HeatMapUpGraph></HeatMapUpGraph>
                            <HeatMapDownGraph></HeatMapDownGraph>
                        </div>
                    </div>
                </div>
            </div>
            <Spin tip="Loading..." fullscreen size={"large"} spinning={spinning}>
            </Spin>
        </>
    )
};

export  default  AppIndex;

